import React, { Component, Suspense, lazy } from 'react'

import { Route, Switch } from 'react-router-dom'

// import Home from '@/views/Home'
// 路由拆分和懒加载
// import如果把它当作函数来使用，它会把js进行拆分
// 魔法注释，给拆分后的文件自定义名称，一般情况下，不写
import Fav from '@/views/Fav'
import checkLoginHoc from '@/hoc/checkLogin'
const Home = lazy(() => import(/*webpackChunkName:'home'*/ '@/views/Home'))
const Detail = lazy(() => import('@/views/Detail'))
const Login = lazy(() => import('@/views/Login'))
const Search = lazy(() => import('@/views/Search'))

const FavCmp = checkLoginHoc(Fav)

class Routes extends Component {
  render() {
    return (
      <Suspense fallback={<div>loading...</div>}>
        <Switch>
          <Route path="/detail/:id" component={Detail} />
          <Route path="/login" component={Login} />
          <Route path="/search" component={Search} />
          <Route path="/fav" component={FavCmp} />
          <Route exact={true} path="/" component={Home} />
        </Switch>
      </Suspense>
    )
  }
}

export default Routes
